import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface ParkingManagementProps {
  width?: string | number;
  height?: string | number;
  topLeftImage?: string;
  topRightImage?: string;
  bottomLeftImage?: string;
  bottomRightImage?: string;
  centerImage?: string;
  cornerSize?: {
    width?: number;
    height?: number;
  };
  centerSize?: {
    width?: number;
    height?: number;
  };
  spacing?: number;
  showLabels?: boolean;
  labels?: {
    topLeft?: string;
    topRight?: string;
    bottomLeft?: string;
    bottomRight?: string;
    center?: string;
  };
  onCornerClick?: (position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') => void;
  onCenterClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const ParkingManagement = forwardRef<HTMLDivElement, ParkingManagementProps>((props, ref) => {
  const {
    topLeftImage = 'http://localhost:8085/static/images/chuxingfuwu/bg1.png',
    topRightImage = 'http://localhost:8085/static/images/chuxingfuwu/bg2.png',
    bottomLeftImage = 'http://localhost:8085/static/images/chuxingfuwu/bg11.png',
    bottomRightImage = 'http://localhost:8085/static/images/chuxingfuwu/bg12.png',
    centerImage = 'http://localhost:8085/static/images/chuxingfuwu/zx.png',
    cornerSize = {
      width: 173,
      height: 57
    },
    centerSize = {
      width: 151,
      height: 130
    },
    spacing = 120,
    showLabels = false,
    labels = {
      topLeft: '停车区域A',
      topRight: '停车区域B',
      bottomLeft: '停车区域C',
      bottomRight: '停车区域D',
      center: '管理中心'
    },
    number = {},
    onCornerClick,
    onCenterClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: `${((cornerSize.width * 2) + centerSize.width) - 65}px`,
    height: `${(cornerSize.height * 2) + 5}px`,
    ...style
  };
  const leftRightImg: React.CSSProperties = {
    width: typeof cornerSize.width === 'number' ? `${cornerSize.width}px` : cornerSize.width,
    height: typeof cornerSize.height === 'number' ? `${cornerSize.height}px` : cornerSize.height,
    ...style
  };

  const handleCornerClick = (position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') => {
    if (onCornerClick) {
      onCornerClick(position);
    }
  };

  const handleCenterClick = () => {
    if (onCenterClick) {
      onCenterClick();
    }
  };

  const parkingManagementClassName = ['parking-management', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={parkingManagementClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="left">
        <div className="left-item"
             style={{ leftRightImg, backgroundImage: topLeftImage ? `url(${topLeftImage})` : undefined,
               width: cornerSize.width,
               height: cornerSize.height,
               backgroundPosition: 'top center'}}
             onClick={() => handleCornerClick('topLeft')}>
          <div className="item-str">
            <span>{labels.topLeft}</span>
            <span style={{fontSize: '20px'}}>{number.topLeft}</span>
          </div>
        </div>
        <div className="left-item"
             style={{ leftRightImg, backgroundImage: bottomLeftImage ? `url(${bottomLeftImage})` : undefined,
               width: cornerSize.width,
               height: cornerSize.height,
               backgroundPosition: 'bottom center'}}
             onClick={() => handleCornerClick('bottomLeft')}>
          <div className="item-str">
            <span>{labels.bottomLeft}</span>
            <span style={{fontSize: '20px'}}>{number.bottomLeft}</span>
          </div>
        </div>
      </div>
      <div className="middle"
           onClick={handleCenterClick}
           style={{
             backgroundImage: centerImage ? `url(${centerImage})` : undefined,
             left: cornerSize.width - 20,
             width: centerSize.width,
             height: centerSize.height,}}></div>
      <div className="right">
        <div className="left-item"
             style={{leftRightImg, backgroundImage: topRightImage ? `url(${topRightImage})` : undefined,
               width: cornerSize.width,
               height: cornerSize.height,
               backgroundPosition: 'top center'}}
             onClick={() => handleCornerClick('topRight')}>
          <div className="item-str">
            <span>{labels.topRight}</span>
            <span style={{fontSize: '20px'}}>{number.topRight}</span>
          </div>
        </div>
        <div className="left-item"
             style={{leftRightImg, backgroundImage: bottomRightImage ? `url(${bottomRightImage})` : undefined,
               width: cornerSize.width,
               height: cornerSize.height,
               backgroundPosition: 'bottom center'}}
             onClick={() => handleCornerClick('bottomRight')}>
          <div className="item-str">
            <span>{labels.bottomRight}</span>
            <span style={{fontSize: '20px'}}>{number.bottomRight}</span>
          </div>
        </div>
      </div>
    </div>
  );
});

ParkingManagement.displayName = 'ParkingManagement';

export default ParkingManagement;
